<template>
    <el-form :inline="true">
        <el-form-item label="一级分类">
            <el-select v-model="categoryStore.category1Id" :disabled="disabled">
                <el-option v-for="c1 in categoryStore.category1List" :key="c1.id" :label="c1.name" :value="c1.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
            <el-select v-model="categoryStore.category2Id" :disabled="disabled">
                <el-option v-for="c2 in categoryStore.category2List" :key="c2.id" :label="c2.name" :value="c2.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
            <el-select v-model="categoryStore.category3Id" :disabled="disabled">
                <el-option v-for="c3 in categoryStore.category3List" :key="c3.id" :label="c3.name" :value="c3.id" />
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
import { defineComponent, onMounted, watch } from 'vue'
import { useCategoryStore } from '@/stores/category'
import { storeToRefs } from 'pinia';
export default defineComponent({
    name: 'CategorySelector'
})
</script>

<script lang="ts" setup>
// 声明接收属性
defineProps<{
    disabled: boolean
}>()
const categoryStore = useCategoryStore()
onMounted(() => {
    categoryStore.getCategory1List()
})
// 监视categoryStore.category1Id的变化
// categoryStore是一个Proxy对象
// category1Id属性在categoryStore中本质是一个ref对象
// 注意: 当读取proxy对象中的一个ref对象属性时, 它会自动读取返回其value值
//    不能直接watch, 得使用函数的形式
watch(() => categoryStore.category1Id, (val) => {
    categoryStore.getCategory2List(val as number)
})
// 监视categoryStore.category2Id的变化
watch(() => categoryStore.category2Id, (val) => {
    categoryStore.getCategory3List(val as number)
})

//让store中取出中的属性都是ref对象=》可以直接使用/监视
const { category2Id } = storeToRefs(categoryStore)
//categoryStore.category2Id的变化
watch(() => categoryStore.category2Id, (val) => {
    watch(category2Id, (val) => {
        //只要有值才去请求
        if (val) {
            categoryStore.getCategory3List(val)
        }
    })
})
</script>

<style lang="less" scoped></style>